<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .parent{
            width: 200px;
            height: 200px;
            background-color: cyan;
            margin: 50px;
            position: relative;
            /* 相对定位：原先位置保留，相对于当前位置定位 */
            top:30px;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: darkgoldenrod;
            /* 绝对定位 如果没有定位祖先元素，那么相对视口区的左上角定位,如果有定位祖先元素，那么相对于定位祖先元素的左上角定位*/
            /* 绝对定位absolute,相对定位relative,粘性定位sticky,固定定位fixed */
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: darkmagenta;
            /* 固定在视口区的某个位置 */
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: darkslateblue;
            position: sticky;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="parent">
        相对定位
        <div class="child">绝对定位</div>
    </div>
    <div class="one">固定定位</div>
    <div class="two">粘性定位</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    end
</body>
</html>